<template>
  <!-- 添加和修改课时表单 
        dialogVisible 决定是否显示模态框
  -->
  <el-dialog :visible="dialogVisible" :title="title" @close="close()">
    <el-form :model="video" label-width="120px">
      <el-form-item label="课时标题">
        <el-input v-model="video.title" />
      </el-form-item>
      <el-form-item label="课时排序">
        <el-input-number v-model="video.sort" :min="0" />
      </el-form-item>
      <el-form-item label="是否免费">
        <el-radio-group v-model="video.free">
          <el-radio :label="true">免费</el-radio>
          <el-radio :label="false">默认</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 上传视频 TODO -->
      <el-form-item label="上传视频">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :on-exceed="handleUploadExceed"
          :file-list="fileList"
          :limit="1"
          action="http://localhost:8130/admin/vod/media/upload"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选择视频</el-button
          >
          <el-button
            :disabled="uploadBtnDisabled"
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload()"
            >上传</el-button
          >
        </el-upload>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import videoApi from "@/api/video.js";
export default {
  data() {
    return {
      fileList: [], //上传文件列表
      //重复上传默认不禁用
      uploadBtnDisabled: false,
      title: "添加课时",
      //默认不显示模态框
      dialogVisible: false,
      video: {
        sort: 0,
        free: false, //默认不免费
      },
    };
  },
  methods: {
    close() {
      this.dialogVisible = false;
      this.formReset();
    },
    open(chapterId, courseId, videoId) {
      //接收章节id和课程id
      this.dialogVisible = true;
      if (chapterId) {
        this.video.chapterId = chapterId;
      }
      if (courseId) {
        this.video.courseId = courseId;
      }
      if (videoId) {
        //查询video信息.回显到对话框
        videoApi.getVideoById(videoId).then((respose) => {
          this.video = respose.data.item;
          this.fileList = [{name:this.video.videoOriginalName}]
        });
        
      }
    },
    saveOrUpdate() {
      if (this.video.id) {
        this.update();
      } else {
        this.save();
      }
      this.close();
    },
    save() {
      //小节模态框没有收集: 课程id 和 章节id的初始化
      videoApi.saveVideo(this.video).then((response) => {
        this.$message.success(response.message);
        //关闭对话框
        this.close();
        //更新父组件的章节课时的嵌套列表
        this.$parent.getChapterNestedList();
      });
    },
    update() {
      videoApi.updateVideo(this.video).then((response) => {
        this.$message.success(response.message);
        //关闭对话框
        this.close();
        //更新父组件的 章节课时的嵌套列表
        this.$parent.getChapterNestedList();
      });
    },
    //新增更新后 清空模态框缓存
    formReset() {
      this.fileList = []; //重置视频上传列表
      this.video = {
        sort: 0,
        free: false, //默认不免费
      };
    },
    //限制上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning("想要重新上传视频，请先删除列表中的视频");
    },
    //上传视频
    submitUpload() {
      this.uploadBtnDisabled = true;
      this.$refs.upload.submit(); // 提交上传请求
    },
    // 视频上传成功的回调
    handleUploadSuccess(response, file, fileList) {
      this.uploadBtnDisabled = false;
      if (response.success) {
        //课时的视频id
        this.video.videoSourceId = response.data.videoId;
        this.video.videoOriginalName = file.name;
        this.$message.success(response.message)
      } else {
        this.$message.error("上传失败1");
      }

    },
    // 失败回调
    handleUploadError() {
      this.uploadBtnDisabled = false;
      this.$message.error("上传失败2");
    },
  },
};
</script>
